﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Cordova_Media</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />

	
    
    <!-- Cordova win8 references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/jcordova.js"></script>
</head>
<body>
    <button id="btnStart" onclick="start()">Start</button>
    <button id="btnPlay" onclick="play()" disabled="disabled">Play</button>
    <button id="btnPause" onclick="pause()" disabled="disabled">Pause</button>
    <button id="btnStop" onclick="stop()" disabled="disabled">Stop</button>
    <button id="btnPosition" onclick="position()" disabled="disabled">Position</button>
    <div id="statusDiv">[Status]</div>
    <div id="durationDiv">[Duration]</div>
    <div id="positionDiv">[Position]</div>

    <script type="text/javascript">

        var $ = function (sel) {
            return document.querySelector(sel);
        };

        var updateStatus = function (msg) {
            console.log("Status::" + msg);
            $("#statusDiv").innerHTML = msg;
        };


        var media = null;
        var src = "/music/BlueZedEx.mp3";
        function start() {
            media = new Media(src,
                function () {
                    updateStatus("Success creating media");
                },
                function () {
                    updateStatus("Error loading media.");
                },
                function (res) {
                    updateStatus("Media status callback :: " + res);
                }
            );
            $("#durationDiv").innerHTML = 'Duration: ' + media.getDuration();
            updateStatus("Media starting");

            btnStart.disabled = 'disabled';
            btnPlay.disabled = false;
            btnStop.disabled = false;
            btnPosition.disabled = false;
        }
        function play() {
            media.play();
            btnPlay.disabled = 'disabled';
            btnPause.disabled = false;
            updateStatus("Media playing.");
        }
        function pause() {
            media.pause();
            btnPlay.disabled = false;
            btnPause.disabled = 'disabled';
            updateStatus("Media paused.");
        }
        function stop() {
            media.stop();
            btnPlay.disabled = 'disabled';
            btnPause.disabled = 'disabled';
            btnStart.disabled = false;
            btnStop.disabled = 'disabled';
            btnPosition.disabled = 'disabled';
            updateStatus( "Media stopped.");
        }

        function position() {
            media.getCurrentPosition(
                function (p) {
                    $("#positionDiv").innerHTML = "Position: " + p;
                    
                },
                function(e) {
                    updateStatus("Error getting position: " + e);
                }
            )
        }
    </script>

</body>
</html>